Skip to main content

Dialogs and toasts methods

These methods are intended to open native Home Assistant dialogs and trigger native Home Assistant toast notifications.

openAlertDialog​

This method will open an alert dialog. It accepts only one parameter wich is an object with the next properties: the title and the text of the alert dialog and two optional properties with a confirmText (text of the confirm button) and a confirm action that will be executed when the confirm button is clicked.

custom-sidebar-config.yaml
order:
  - new_item: true
    item: 'admin'
    icon: 'mdi:account-key'
    on_click:
      action: 'javascript'
      code: |
        if (user_is_admin) {
          // Execute some code only for admins
        } else {
          openAlertDialog({
            title: 'Error',
            text: 'Only admin users can execute this',
            confirmText: 'Close',
            confirm: () => {
              console.log('The close button was clicked');
            }
          });
        }

openConfirmDialog​

This method will open a confirmation dialog that allow one to accept or decline what it states. It also accepts only one parameter which is an object with the same properties as the openAlertDialog method and on top of them it will also accept a dismissText property to indicate the text of the dismiss button, a destructive property to indicate if the confirmation dialog will execute a destructive action, and a cancel action that will be executed when the dismiss button is clicked.

custom-sidebar-config.yaml
order:
  - new_item: true
    item: 'execute'
    icon: 'mdi:script-text-outline'
    on_click:
      action: 'javascript'
      code: |
        openConfirmDialog({
          title: 'Execute the script',
          text: 'Do you want to execute the script?',
          confirm: () => {
            // execute the script
          },
          cancel: () => {
            // do not execute the script
          }
        });

openMoreInfoDialog​

This method will open a more info dialog of the specified entity. It requires an entityId parameter which is the entity that will be open in the more info dialog.

custom-sidebar-config.yaml
order:
  - new_item: true
    item: 'Living-room lights'
    icon: 'mdi:lightbulb-group'
    on_click:
      action: 'javascript'
      code: |
        openMoreInfoDialog('light.living_room');

openRestartDialog​

Important

Take into account that even if every user can open the restart dialog, only admin users are authorized to restart Home Assistant.

This method will open the dialog to restart Home Assistant.

custom-sidebar-config.yaml
order:
  - new_item: true
    item: 'Restart'
    icon: 'mdi:restart'
    on_click:
      action: 'javascript'
      code: |
        openRestartDialog();

showToast​

This method will trigger a toast notification

// Show a notification toast with a string message
showToast({
  message: 'Toast example'
});

// Show a notification toast with a translation key
showToast({
  message: {
    translationKey: 'ui.dialogs.restart.reboot.action_toast'
  }
});

// Show a notification toast with an action
showToast({
  message: 'Toast example',
  action: {
    action: () => {
      console.log('action clicked!!');
    },
    text: 'Action example'
  }
});

// Show a notification toast with a longer duration
showToast({
  message: 'Toast example',
  duration: 10000 // 10 seconds
});